<template>
  <div class="tree_search_form">
    <el-form @submit.native.prevent>
      <el-autocomplete
        v-model.trim="keyword"
        :fetch-suggestions="querySearch('all')"
        ref="autocomplete"
        size="small"
        placeholder="请输入"
        popper-class="width_reset">
        <el-select
          v-model="searchType"
          @change="handleTypeChange"
          slot="prepend" placeholder="请选择">
          <el-option label="产品型号" value="productNumber"></el-option>
          <el-option label="批次号" value="batchNumber"></el-option>
          <el-option label="产品名称" value="productName"></el-option>
          <el-option label="任务号" value="taskNumber"></el-option>
        </el-select>
        <span @click="handleToggle" slot="suffix" class="toggle_pro">高级</span>
        <el-button
          slot="append"
          size="mini"
          class="tree_search_btn"
          icon="el-icon-search"
          native-type="submit"
          @click="handleSearch"
        ></el-button>
      </el-autocomplete>
    </el-form>
    <div class="tree_pro_search" v-if="isProSearch">
      <el-form
        label-position="right"
        label-width="95px"
        :model="proFrom"
        @submit.native.prevent>
        <el-form-item label="产品型号：">
          <el-autocomplete
            v-model.trim="proFrom.productNumber"
            :fetch-suggestions="querySearch('productNumber')"
            popper-class="width_reset"
            placeholder="请输入产品型号"
            clearable>
          </el-autocomplete>
        </el-form-item>
        <el-form-item label="批次号：">
          <el-autocomplete
            v-model.trim="proFrom.batchNumber"
            :fetch-suggestions="querySearch('batchNumber')"
            popper-class="width_reset"
            placeholder="请输入批次号"
            clearable>
          </el-autocomplete>
        </el-form-item>
        <el-form-item label="产品名称：">
          <el-autocomplete
            v-model.trim="proFrom.productName"
            :fetch-suggestions="querySearch('productName')"
            popper-class="width_reset"
            placeholder="请输入产品名称"
            clearable>
          </el-autocomplete>
        </el-form-item>
        <el-form-item label="任务号：">
          <el-autocomplete
            v-model.trim="proFrom.taskNumber"
            :fetch-suggestions="querySearch('taskNumber')"
            popper-class="width_reset"
            placeholder="请输入任务号"
            clearable>
          </el-autocomplete>
        </el-form-item>
        <el-form-item>
          <div class="pro_btns mes_btn">
            <el-button
              type="default"
              size="mini"
              @click="resetProSearch">
              重置
            </el-button>
            <el-button
              type="primary"
              size="mini"
              native-type="submit"
              @click="handleProSearch">
              查询
            </el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
// 获取任务号树
const IgetQueryParams = 'a/workorder/workorder/inittasklist'
const searchTypeArr = ['productNumber', 'batchNumber', 'productName', 'taskNumber']
/**
 * @author liubaohui
 * @desc 树搜索组件
 */
export default {
  name: 'Index',
  data() {
    return {
      isProSearch: false, // 是否高级搜索
      searchType: 'productNumber', // 搜索方式下拉框
      keyword: '', // 搜索关键字，精确搜索
      proFrom: {
        productNumber: '', // 产品型号
        batchNumber: '', // 批次号
        productName: '', // 产品名称
        taskNumber: '', // 任务号
      },
      queryParams: {
        productNumber: [], // 产品型号
        batchNumber: [], // 批次号
        productName: [], // 产品名称
        taskNumber: [], // 任务号
      },
    }
  },
  mounted() {
    this.initQueryParams()
  },
  methods: {
    async initQueryParams() {
      let queryParams = await this.getQueryParams()
      searchTypeArr.forEach(value => {
        queryParams[value] = queryParams[value].reduce((pre, cur) => [...pre, {value: cur}], [])
      })
      this.queryParams = queryParams
    },
    querySearch(type) {
      let currentQuery
      if (type === 'all') {
        currentQuery = this.queryParams[this.searchType]
      } else {
        currentQuery = this.queryParams[type]
      }
      return (queryString, cb) => {
        let results = queryString ? currentQuery.filter(this.createFilter(queryString)) : currentQuery
        cb(results)
      }
    },
    createFilter(queryString) {
      return (restaurant) => {
        return restaurant.value.toLowerCase().includes(queryString.toLowerCase())
      }
    },
    // 切换搜索类型是要先清空推荐选项，否则推荐选项有延迟
    handleTypeChange() {
      this.$refs.autocomplete.suggestions = []
    },
    handleToggle() {
      this.isProSearch = !this.isProSearch
      this.$refs.autocomplete.suggestions = []
    },
    handleSearch() {
      let query = {}
      query[this.searchType] = this.keyword
      this.$emit('search', query)
    },
    handleProSearch() {
      this.$emit('search', this.proFrom)
    },
    // 清空高级搜索条件
    resetProSearch() {
      this.proFrom = {
        productNumber: '', // 产品型号
        batchNumber: '', // 批次号
        productName: '', // 产品名称
        taskNumber: '', // 任务号
      }
    },
    /**
     * 获取查询条件
     * @returns {Promise<any>}
     */
    getQueryParams() {
      this.isLoading = true
      let req = {
        method: 'get',
        url: IgetQueryParams,
        noCommit: true
      }
      return this.$store.dispatch('saveData', req)
        .then(res => {
          return res.data
        })
        .catch(() => {
          return {
            productNumber: [], // 产品型号
            batchNumber: [], // 批次号
            productName: [], // 产品名称
            taskNumber: [], // 任务号
          }
        })
    },
  }
}
</script>

<style lang="less">
  /*自动补全下拉框宽度*/
  .el-autocomplete-suggestion, .width_reset {
    width: 240px !important;
  }

  .tree_search_form {
    .el-autocomplete {
      width: 100%;
    }
    .el-input__inner {
      padding-left: 5px;
    }
    /*高级切换*/
    .toggle_pro {
      line-height: 32px;
      color: #2196f3;
      cursor: pointer;
    }
    /*头部下拉框*/
    .el-input-group__prepend {
      background-color: unset;
      .el-select {
        width: 95px;
        .el-input__suffix {
          right: 0;
        }
        .el-input__inner {
          padding-right: 0;
        }
      }
    }
    .tree_pro_search {
      box-sizing: border-box;
      padding: 10px 10px 0 0;
      margin-top: 10px;
      background-color: #f0f8ff;
      border: 1px solid rgba(0, 180, 255, 0.3);
      .el-form-item {
        margin-bottom: 10px;
      }
      .el-form-item__label {
        padding-right: 0;
        font-size: 13px;
        line-height: 26px;
      }
      .el-form-item__content {
        line-height: 26px;
      }
      .el-input__inner {
        font-size: 13px;
        height: 26px;
        line-height: 26px;
      }
      /*清空按钮*/
      .el-input--small .el-input__icon {
        line-height: 26px;
      }
      .pro_btns {
        width: 100%;
        display: flex;
        justify-content: space-between;
        .el-button {
          min-width: unset;
          height: 26px;
          width: 60px;
          padding: 0;
          font-size: 13px;
          line-height: 26px;
        }
      }
    }
  }
</style>
